<template>
	<div>
		<el-button
			type="primary"
			size="small"
			class="btn"
			@click="dialogVisible = true"
		>{{btnText}}</el-button>

		<el-dialog
			title="PDF 预览"
			:visible.sync="dialogVisible"
			:close-on-click-modal="false"
		>
			<div class="main">
				<iframe
					id="printIframe"
					:src="src"
					frameborder="0"
					style="width:100%;height:100%;"
				></iframe>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
				dialogVisible: false,
				btnText: 'PDF 预览 (内嵌 iframe)',
				//src: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
        src:'/file/pdf/张文哲-1667360000398.pdf'
			}
		}
	}
</script>

<style scoped>
	.btn {
		margin: 20px 0px;
	}
	.main {
		height: 700px;
		overflow: hidden;
	}
	#printIframe::-webkit-scrollbar {
		width: 6px;
	}
	/* 修改 滚动条的 下面 的 样式 */
	#printIframe::-webkit-scrollbar-track {
		background-color: white;
		-webkit-border-radius: 2em;
		-moz-border-radius: 2em;
		border-radius: 2em;
	}
	/* 修改 滑块 */
	#printIframe::-webkit-scrollbar-thumb {
		background-color: #dcdfe6;
		-webkit-border-radius: 2em;
		-moz-border-radius: 2em;
		border-radius: 2em;
	}
	/deep/ .el-dialog {
		width: 1000px;
		height: 700px;
		font-family: '楷体';
	}
	/deep/ .el-dialog__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/deep/ .el-dialog__body {
		padding: 0;
	}
</style>

